<script setup lang="ts">
import { ref, onMounted } from "vue";
import { PureTableBar } from "@/components/RePureTableBar";
import type {
  LoadingConfig,
  AdaptiveConfig,
  PaginationProps
} from "@pureadmin/table";
const ruleFormRef = ref();

const newFormInline = ref({
  amount: 0,
  paymentdate: "",
  paymentmethod: "",
  serialnumber: ""
});

const paymentmethodList = ref([
  {
    paymentmethod: "支付宝",
    name: "支付宝"
  },
  {
    paymentmethod: "微信",
    name: "微信"
  },
  {
    paymentmethod: "民生银行",
    name: "民生银行"
  },
  {
    paymentmethod: "中国银行",
    name: "中国银行"
  }
]);

// 订单基础信息
const columns: TableColumnList = [
  {
    label: "勾选列", // 如果需要表格多选，此处label必须设置
    type: "selection",
    fixed: "left",
    reserveSelection: true // 数据刷新后保留选项
  },
  {
    label: "订单号",
    prop: "orderno",
    width: 160
  },
  {
    label: "订单时间",
    prop: "orderdate",
    width: 120
  },
  {
    label: "采购单位",
    prop: "purchasingunit"
  },
  {
    label: "采购人",
    prop: "contactsname",
    width: 120
  },
  {
    label: "订单金额",
    prop: "price",
    width: 120
  },
  {
    label: "订单状态",
    prop: "status",
    width: 120
    // cellRenderer: ({ row }) => {
    //   return (
    //     <el-select
    //       width="120"
    //       v-model={row.status}
    //       onChange={() => changeOrderStatus(row)}
    //       size="small"
    //     >
    //       <el-option label="待处理" value="待处理"></el-option>
    //       <el-option label="已发货" value="已发货"></el-option>
    //       <el-option label="待收款" value="待收款"></el-option>
    //       <el-option label="已回款" value="已回款"></el-option>
    //     </el-select>
    //   );
    // }
  }
];

const dataList = ref([
  {
    orderno: "DC202509012259603",
    orderdate: "2025-09-02",
    purchasingunit: "中山大学",
    contactsname: "陈景欣",
    price: 470,
    status: "未发货",
    productinfo: [
      {
        fgoodsid: 200207351014,
        fgoodname: "潮霉素B",
        fgoodcode: "1366ML010",
        fspec: "10ml",
        fbrand: "Biofroxx",
        funit: "瓶",
        fquantity: 1,
        fprice: 351,
        fbidprice: 351,
        casno: "31282-04-9"
      },
      {
        fgoodsid: 200304652226,
        fgoodname: "原钒酸钠溶液",
        fgoodcode: "R21224",
        fspec: "10ml/瓶",
        fbrand: "源叶生物(YuanYe)",
        funit: "瓶",
        fquantity: 1,
        fprice: 119,
        fbidprice: 119,
        casno: "13721-39-6"
      }
    ],
    note: "已定直发SF3284952115577、JDVB47588781440",
    salesman: ""
  },
  {
    orderno: "DC202509012137401",
    orderdate: "2025-09-02",
    purchasingunit: "江西中医药大学",
    contactsname: "叶晓钰",
    price: 408,
    status: "未发货",
    productinfo: [
      {
        fgoodsid: 200304248848,
        fgoodname: "粘蛋白",
        fgoodcode: "S12066",
        fspec: "5g/瓶",
        fbrand: "源叶生物(YuanYe)",
        funit: "瓶",
        fquantity: 1,
        fprice: 408,
        fbidprice: 408,
        casno: "84082-64-4"
      }
    ],
    note: "已定直发 SF3284017427194",
    salesman: ""
  },
  {
    orderno: "DC202508284944001",
    orderdate: "2025-09-01",
    purchasingunit: "广州市第一人民医院",
    contactsname: "郑允圣",
    price: 297,
    status: "待处理",
    productinfo: [
      {
        fgoodsid: 200255404603,
        fgoodname: "岩藻多糖【HY-132179】",
        fgoodcode: "HY-132179",
        fspec: "500mg/件",
        fbrand: "MCE",
        funit: "件",
        fquantity: 1,
        fprice: 297,
        fbidprice: 297,
        casno: "9072-19-9"
      }
    ],
    note: "刘宏浩补单25.9.1发票送货单25442000000533492443",
    salesman: "温博森"
  },
  {
    orderno: "DC202509012220901",
    orderdate: "2025-09-01",
    purchasingunit: "中山大学附属第一医院",
    contactsname: "李谦宁",
    price: 225,
    status: "未发货",
    productinfo: [
      {
        fgoodsid: 200186299733,
        fgoodname: "4%多聚甲醛通用型组织固定液",
        fgoodcode: "BL539A",
        fspec: "500ml",
        fbrand: "白鲨(Biosharp)",
        funit: "瓶",
        fquantity: 10,
        fprice: 22.5,
        fbidprice: 22.5,
        casno: ""
      }
    ],
    note: "已定直发 JDVB47588908043//25.9.3发票送货单",
    salesman: ""
  },
  {
    orderno: "DC202509012203501",
    orderdate: "2025-09-01",
    purchasingunit: "中山大学",
    contactsname: "王颢悦",
    price: 1616.65,
    status: "未发货",
    productinfo: [
      {
        fgoodsid: 200478954838,
        fgoodname: "丙二醇",
        fgoodcode: "P967315",
        fspec: "500g/瓶",
        fbrand: "麦克林(Macklin)",
        funit: "瓶",
        fquantity: 2,
        fprice: 79.2,
        fbidprice: 79.2,
        casno: "26264-14-2"
      },
      {
        fgoodsid: 200479032834,
        fgoodname: "4-硝基喹啉 N -氧化物",
        fgoodcode: "N8141",
        fspec: "1g/瓶",
        fbrand: "西格玛(Sigma-Aldrich)",
        funit: "瓶",
        fquantity: 1,
        fprice: 1458.25,
        fbidprice: 1458.25,
        casno: "56-57-5"
      }
    ],
    note: "温 西格玛-20已定发我们，丙二醇发3瓶已定直发 JDVC32182738024 ，送货单随货",
    salesman: ""
  },
  {
    orderno: "DC202509012130401",
    orderdate: "2025-09-01",
    purchasingunit: "中山大学",
    contactsname: "秦义超",
    price: 1549.6,
    status: "待处理",
    productinfo: [
      {
        fgoodsid: 200374350902,
        fgoodname: "S799534 硫酸链霉素,粉末",
        fgoodcode: "S799534",
        fspec: "25g/瓶",
        fbrand: "麦克林(Macklin)",
        funit: "瓶",
        fquantity: 1,
        fprice: 171.2,
        fbidprice: 171.2,
        casno: "3810-74-0"
      },
      {
        fgoodsid: 200501023582,
        fgoodname: "RNA Clean & Concentrator™-5 RNA纯化试剂盒(有盖)",
        fgoodcode: "R1015",
        fspec: "50 Preps",
        fbrand: "ZYMO RESEARCH",
        funit: "盒",
        fquantity: 1,
        fprice: 1100,
        fbidprice: 1100,
        casno: ""
      },
      {
        fgoodsid: 200374391851,
        fgoodname: "C804169 氯霉素,98%",
        fgoodcode: "C804169",
        fspec: "100g/瓶",
        fbrand: "麦克林(Macklin)",
        funit: "瓶",
        fquantity: 1,
        fprice: 278.4,
        fbidprice: 278.4,
        casno: "56-75-7"
      }
    ],
    note: "已定直发，ZYMO走账 麦JDVC32176046398 、SF3284954483507 //25.9.4送货单",
    salesman: "温博森"
  },
  {
    orderno: "DC202509012003301",
    orderdate: "2025-09-01",
    purchasingunit: "江苏省中医药研究院",
    contactsname: "桂涛",
    price: 8400,
    status: "待处理",
    productinfo: [
      {
        fgoodsid: 200306382163,
        fgoodname: "胎牛血清（优级）",
        fgoodcode: "G8002-500ML",
        fspec: "500 mL",
        fbrand: "赛维尔生物(Servicebio)",
        funit: "瓶",
        fquantity: 6,
        fprice: 1400,
        fbidprice: 1400,
        casno: ""
      }
    ],
    note: "",
    salesman: "温博森"
  },
  {
    orderno: "DC202508294219801",
    orderdate: "2025-09-01",
    purchasingunit: "中山大学",
    contactsname: "谢袁泽宇",
    price: 120,
    status: "待处理",
    productinfo: [
      {
        fgoodsid: 200213875956,
        fgoodname: "1M Tris-HCl, pH8.8试剂",
        fgoodcode: "ST788-500ml",
        fspec: "500ml ST788-500ml",
        fbrand: "碧云天(Beyotime)",
        funit: "件",
        fquantity: 1,
        fprice: 146,
        fbidprice: 120,
        casno: ""
      }
    ],
    note: "已定发我们，送货单随货",
    salesman: "温博森"
  }
]);

const adaptiveConfig: AdaptiveConfig = {
  /** 表格距离页面底部的偏移量，默认值为 `96` */
  offsetBottom: 110
  /** 是否固定表头，默认值为 `true`（如果不想固定表头，fixHeader设置为false并且表格要设置table-layout="auto"） */
  // fixHeader: true
  /** 页面 `resize` 时的防抖时间，默认值为 `60` ms */
  // timeout: 60
  /** 表头的 `z-index`，默认值为 `100` */
  // zIndex: 100
};
</script>

<template>
  <PureTableBar title="" :columns="columns">
    <template v-slot="{ dynamicColumns }">
      <pure-table
        height="300"
        size="small"
        :columns="dynamicColumns"
        :data="dataList"
        showOverflowTooltip
        :adaptiveConfig="adaptiveConfig"
      ></pure-table>
    </template>
  </PureTableBar>

  <el-form ref="ruleFormRef">
    <el-form-item label="回款金额" prop="amount">
      <el-input
        v-model.number="newFormInline.amount"
        type="number"
        clearable
        placeholder="请输入回款金额"
      />
    </el-form-item>
    <el-form-item label="流水单号" prop="serialnumber">
      <el-input
        v-model="newFormInline.serialnumber"
        clearable
        placeholder="请输入流水单号"
      />
    </el-form-item>
    <el-form-item label="回款日期" prop="paymentdate">
      <el-date-picker
        v-model="newFormInline.paymentdate"
        type="date"
        value-format="yyyy-MM-dd"
        placeholder="请选择回款日期"
      />
    </el-form-item>
    <el-form-item label="回款方式" prop="paymentmethod">
      <el-select
        v-model="newFormInline.paymentmethod"
        placeholder="请选择回款方式"
        class="!w-[180px]"
      >
        <el-option
          v-for="(item, index) in paymentmethodList"
          :key="index"
          :label="item.name"
          :value="item.paymentmethod"
        />
      </el-select>
    </el-form-item>
  </el-form>
</template>

<style lang="scss" scoped></style>
